<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>时间线（竖）</title>
</head>
<style>
    *,
    *::after,
    *::before {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        font-size: 40px;
    }
    
    body {
        background-color: #456990;
        font-size: 16px;
        line-height: 1.5;
        font-family: "微软雅黑";
        color: #fff;
    }
    
    .timeline {
        white-space: nowrap;
        overflow-y: hidden;
    }
    
    .timeline ol {
        font-size: 0;
        height: 200vw;
        padding: 0 250px;
        transition: all 1s;
    }
    
    .timeline ol li {
        position: relative;
        /*display: inline-block;*/
        list-style-type: none;
        width: 3px;
        height: 160px;
        left: 300px;
        background-color: #fff;
    }
    
    .timeline ol li:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        left: -4px;
        bottom: 0;
        width: 12px;
        height: 12px;
        transform: translateY(-50%);
        border-radius: 50%;
        background-color: #f45b60;
    }
    
    .timeline ol li div {
        position: absolute;
        top: 156px;
        width: 280px;
        padding: 15px;
        font-size: 1rem;
        white-space: normal;
        color: black;
        background-color: white;
    }
    
    .timeline ol li div::before {
        position: absolute;
        content: "";
        top: 100%;
        left: 0;
        border-style: solid;
    }
    
    .timeline ol li:nth-child(odd) div {
        left: -300px;
        transform: translateY(-100%);
    }
    
    .timeline ol li:nth-child(odd) div::before {
        border-width: 8px 8px 0 0;
        top: 0px;
        left: 280px;
        border-color: white transparent transparent transparent;
    }
    
    .timeline ol li:nth-child(even) div {
        left: 22px;
        transform: translateY(-100%);
    }
    
    .timeline ol li:nth-child(even) div::before {
        top: 0px;
        left: -8px;
        border-width: 8px 0 8px 8px;
        border-color: white transparent transparent transparent;
    }
    
    .timeline .arrows {
        display: flex;
        position: absolute;
        top: 50%;
        left: 20px;
    }
    
    .timeline .arrows .arrow__prev {
        margin-right: 20px;
    }
</style>

<body>
    <section class="timeline">

        <ol>
            <li>
                <div>
                    <time>1990</time>家中示的院整大量現那！不子被時我步！</div>
            </li>
            <li>
                <div>
                    <time>1991</time>家中示的院整大量現那！不子被時我步！</div>
            </li>
            <li>
                <div>
                    <time>1992</time>家中示的院整大量現那！不子被時我步！</div>
            </li>
            <li>
                <div>
                    <time>1993</time>家中示的院整大量現那！不子被時我步！</div>
            </li>
            <li>
                <div>
                    <time>1994</time>家中示的院整大量現那！家中示的院整大量現那！被時我步！</div>
            </li>
            <li>
                <div>
                    <time>1995</time>家中示的院整大量現那！家中示的院整大量現那！被時我步！</div>
            </li>
            <li>
                <div>
                    <time>1996</time>家中示的院整大量現那！家中示的院整大量現那！被時我步！</div>
            </li>
            <li>
                <div>
                    <time>1997</time>家中示的院整大量現那！不子被時我步！</div>
            </li>
            <li>
                <div>
                    <time>1998</time>家中示的院整大量現那！不子被時我步！</div>
            </li>
            <li>
                <div>
                    <time>1990</time>家中示的院整大量現那！不子被時我步！</div>
            </li>
            <li>
                <div>
                    <time>1991</time>家中示的院整大量現那！不子被時我步！</div>
            </li>
            <li>
                <div>
                    <time>1992</time>家中示的院整大量現那！不子被時我步！</div>
            </li>
        </ol>
        <div class="arrows">
            <button class="arrow arrow__prev disabled">&lt;</button>
            <button class="arrow arrow__next">&gt;</button>
        </div>
    </section>
</body>
<script>
    var timeline = document.querySelector(".timeline ol");
    var elH = document.querySelectorAll(".timeline ol  li>div");
    var arrows = document.querySelectorAll(".timeline .arrows .arrow");
    var arrowPrev = document.querySelector(".timeline .arrows .arrow__prev");
    var arrowNext = document.querySelector(".timeline .arrows .arrow__next");
    var firstItem = document.querySelector(".timeline li:first-child");
    var lastItem = document.querySelector(".timeline li:last-child");
    var yScrolling = 250;


    window.addEventListener("load", init);


    var init = function() {
        setEqualHeights(elH);
        animateTl(yScrolling, arrows, timeline)
    }

    var setEqualHeights = function(el) {
        var counter = 0;
        console.log(el);
        for (var i = 0; i < el.length; i++) {
            var singleHeight = el[i].offsetHeight;
            if (counter < singleHeight) {
                counter = singleHeight;
            }
        }
        for (var i = 0; i < el.length; i++) {
            el[i].style.height = counter + "px";
        }
    }

    var animateTl = function(scrolling, el, tl) {
        var counter = 0;
        for (var i = 0; i < el.length; i++) {
            el[i].addEventListener("click", function() {
                var sign = (this.classList.contains("arrow__prev")) ? "" : "-";
                if (counter === 0) {
                    console.log(12);
                    tl.style.transform = 'translateY(-' + scrolling + 'px)';
                } else {
                    console.log(123);
                    var tlStyle = window.getComputedStyle(tl); //样式
                    var transformStyle = tlStyle.getPropertyValue("-wekit-transform") || tlStyle.getPropertyValue("transform");
                    console.log(transformStyle);
                    var value = parseInt(transformStyle.split(",")[5]) + parseInt(sign + scrolling);
                    console.log(value);
                    tl.style.transform = 'translateY(' + value + 'px)';
                }

                setTimeout(function() {
                    arrowPrev.disabled = false;
                    arrowNext.disabled = false;

                }, 1100);

                counter++;
            })
        }
    }

    init();
</script>

</html>